<script setup>
import {onMounted, ref, reactive} from 'vue';
import {get, post} from '../js/http.js';
import cdcModal from '../components/modal/cdc_modal.vue'
import icon from '../components/icon.vue'
import pageHead from '../components/pagehead.vue'
import nodata from '../components/nodata.vue'

const isEdit = ref(false)
let cdcData = ref([])
let currentCDC = ref({})

onMounted(() => {
  getCDC();
})

async function openModel(item, type) {
  isEdit.value = true
  currentCDC.value = item
  console.log(item.params)
  currentCDC.value.params = JSON.parse(item.params)
}

async function deleteHandle(item, itemIndex) {
  if (!item.id) {
    return;
  }
  post("/admin/cdc/delete", item).then(res => {
    if (res.success) {
      window.message("保存成功", 'success')
      getCDC();
      cdcData.value.splice(itemIndex, 1);
    } else {
      window.message(res.message, 'warning')
    }
  }).catch(error => console.log(error))

}
function addHandle() {
  currentCDC.value = {name: "NewCDC",params:[]}
  isEdit.value = true
}


async function getCDC() {

  get("/admin/cdc/get").then(res => {
    cdcData.value = res.result;
  })
      .catch(error => console.log(error))
}

async function closeModel() {
  isEdit.value = false
}

async function saveHandle() {
  isEdit.value = false
  let res = await post("/admin/cdc/update", currentCDC.value)
  if (res.success) {
    window.message("保存成功", 'success')
    getCDC();
  } else {
    window.message(res.message, 'warning')
  }
}
async function reStart() {
  isEdit.value = false
  let res = await post("/admin/cdc/reStart", currentCDC.value)
  if (res.success) {
    window.message("提交成功", 'success')
    getCDC();
  } else {
    window.message(res.message, 'warning')
  }
}


</script>
<template>
  <pageHead title="CDC任务管理"  iconName="cdc">
    <button class="button is-link is-outlined mr-3" @click="getCDC"><icon icon="refresh" class="is-link mr-1"></icon>刷新</button>
    <button class="button is-link is-outlined" @click="addHandle"><icon icon="add-bold" class="is-link mr-1"></icon>新增CDC数据源</button>
  </pageHead>
  <div v-if="cdcData">
    <table class="table is-fullwidth">
      <thead>
      <tr>
        <th>名称</th><th>类型</th><th>服务器</th><th>端口</th><th>过滤表达式</th><th>用户名</th><th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,itemIndex) in  cdcData" :key="item.Name">
        <td>{{ item.name }}</td><td>{{ item.type }}</td> <td>{{ item.host }}</td><td>{{ item.port }}</td>
        <td>{{ item.filter }}</td><td>{{ item.username }}</td><td><a @click="openModel(item,0)">设置</a>
          <a @click="deleteHandle(item,itemIndex)" class="ml-2">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <nodata v-else></nodata>
  <cdcModal :currentCDC="currentCDC"   @close="closeModel" @save="saveHandle" v-if="isEdit==true"></cdcModal>


</template>
<style scoped>
</style>
